<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root {
            width: 3.45rem;
            height: 1.50rem;
            background: skyblue;
            margin: 0.15rem auto;
        }
    </style>
</head>
<body>
<div id="root"></div>
</body>
<script>
    // 将布局视口宽度除以设计稿的宽度*100作为根节点html的font-size属性值
    // 375
    // window.onresize  = function(){
    //     // 当视口大小发生改变后执行
    //     // console.log("onresize",document.documentElement.clientWidth)
    //     document.documentElement.style.fontSize = document.documentElement.clientWidth/375*100+"px";
    // }


    function adapter (){
        document.documentElement.style.fontSize = document.documentElement.clientWidth/375*100+"px";
    }
    adapter();
    window.onresize = adapter;

</script>
</html>